<template>
  <div id="srm" />
</template>
<script setup>
import { Pane } from 'tweakpane'
import { reactive, watchEffect } from 'vue'

const pane = new Pane({
  container: document.getElementById('srm')
})

const PARAMS = {
  factor: 123,
  miter: 10,
  title: 'hello',
  color: '#ff0055', // {r: 0, g: 255, b: 214, a: 0.5}
  theme: 'dark',
  rm: true,
  offset: { x: 50, y: 25 },
  vertex: { x: 0.3, y: 0.5, z: 0.7, w: 1 },
  count: 0
}

const folder_input = pane.addFolder({
  title: 'input bindings',
  expanded: true
})

folder_input.addInput(PARAMS, 'title') // text
folder_input.addInput(PARAMS, 'factor', { label: '自定义label' }) // number
folder_input.addInput(PARAMS, 'miter', { min: 0, max: 100, step: 10 }) // range
folder_input.addInput(PARAMS, 'color') // color
folder_input.addInput(PARAMS, 'theme', // select
  { options: { Dark: 'dark', Light: 'light' }}
)
folder_input.addInput(PARAMS, 'rm') // 复选框
folder_input.addInput(PARAMS, 'offset', { // point2d
  x: { step: 20 },
  y: { min: -200, max: 200, inverted: true },
  picker: 'inline',
  expanded: true
})
folder_input.addInput(PARAMS, 'vertex') // point3d point4d

const floder_ui = pane.addFolder({
  title: 'ui components',
  expanded: false
})
let count = 0
const btn = floder_ui.addButton({ // button
  title: 'Increment',
  label: 'counter'
})
btn.on('click', () => {
  console.log(count)
  count += 1
})
floder_ui.addBlade({
  view: 'text',
  label: 'name',
  parse: (v) => String(v),
  value: count
})
floder_ui.addSeparator() // 分割线
const tab = floder_ui.addTab({ // tab 页
  pages: [
    { title: 'Parameters' },
    { title: 'Advanced' }
  ]
})

tab.pages[0].addInput(PARAMS, 'miter')

// ...
// watchEffect(() => {
//   nnControl.setValue(testObj.x)
// }, {
//   flush: 'post'
// })

</script>
<style lang="scss" scoped>
.gui-view {
  width: 500px;
  height: 500px;
  background-color: bisque;
}
</style>
